<template>
  <div :style="{height: h,width: w}" class="register">
    <h1>欢迎注册瓜夕夕</h1>
    <van-form @submit="onSubmit">
      <van-field
        class="input"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        class="input"
        v-model="phone"
        name="validator"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ validator, message: '格式不正确' }]"
      />
      <van-field
        class="input"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        class="input"
        v-model="repassword"
        type="password"
        name="repassword"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true, message: '' }]"
      />
      <router-link to="/login">已有账号，去登录</router-link>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" class="btn">点击注册</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
//引入vant轻提示
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

export default {
  data() {
    return {
      w:'375px',
      h:'667px',
      username: '',
      phone:'',
      password: '',
      repassword:''
    };
  },
  methods: {
    validator(val) {
      return /^[1][3,4,5,7,8][0-9]{9}$/.test(val);
    },
    onSubmit(values) {
      console.log('submit', values);
      console.log(values.validator);
      //判断两次输入的密码是否一致，如果一致实行注册
      if(values.password!=values.repassword){
        Toast.fail('两次密码不一致');
      }else{
        //发送post请求，执行注册
        this.axios.post('/register',`uname=${values.username}&upwd=${values.password}&uphone=${values.validator}`).then(result=>{
          console.log(result);
          if(result.data.code==200){ //注册成功
            Toast.success(result.data.message);
            this.$router.push('/login');
          }else if(result.data.code==201){
            Toast.fail(result.data.message);
          };
        })
      }  
    },
  },
  mounted() {
    this.h=window.screen.height+'px';
    this.w=window.screen.width+'px';
    console.log(this.w,this.h)
  },
};
</script>

<style scoped>
.register{
    background-image: url(../assets/bj5.jpeg);
    background-repeat: no-repeat;
    background-size: 100%;
    box-sizing: border-box;
}
.register a{
  color: rgba(15, 59, 110, 0.986);
  font-size: 1.2rem;
  margin-left: 8%;
  font-weight: bold;
}
h1{
    font-size: 2rem;
    padding-top:15%;
    padding-left:19%;
}
.input{
    background: none;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-left: 10%;
    font-size: 1rem;
    font-weight: bold;
}
.btn{
    margin-top: 1rem;
    background-color: rgba(31, 179, 224, 0.5);
    font-size: 1.5rem;
}
</style>
